<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
		.list{
			width: 200px;
			height: 150px;
			background-color: skyblue;
			overflow: auto;
		}
		.news{
			height: 30px;
		}
	</style>
</head>
<body>
    <!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>

    <script type="text/babel">
        class NewsList extends React.Component {

            state = {
                newsArr: []
            }

            componentDidMount() {
                setInterval(() => {
                    //获取原状态
                    const {newsArr} = this.state;
                    //模拟一条新闻
                    const news = '新闻' + (newsArr.length + 1);
                    //更新状态
                    this.setState({
                        newsArr : [news, ...newsArr]
                    });
                }, 1000)
            }

            getSnapshotBeforeUpdate() {
                return this.refs.list.scrollHeight;
            }

            componentDidUpdate(preProps, preState, height) {
                this.refs.list.scrollTop += this.refs.list.scrollHeight - height;
            }

            render() {
                return (
                    <div className="list" ref="list">
                        {
                            this.state.newsArr.map((item, index) => {
                                return <div key={index} className="news">{item}</div>
                            })
                        }    
                    </div>
                )
            }
        }

        //渲染组件到页面
        ReactDOM.render(<NewsList/>, document.getElementById('test'));
    </script>
</body>
</html>